<template>
  <div class="app-container">
    <!--表单组件-->
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="dictDialogShow"
      width="550px"
    >
      <template slot="title">
        <div style="font-family: cursive">{{ dialogTitle }}</div>
      </template>
      <el-form
        ref="form"
        :model="myForm"
        :rules="rules"
        size="small"
        label-width="80px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="上级编码" prop="pcode">
              <el-input
                v-model="myForm.pcode"
                :disabled="true"
                style="width: 170px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="字典名称" prop="name">
              <el-input v-model="myForm.name" style="width: 170px" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="编码" prop="code">
              <el-input v-model="myForm.code" style="width: 170px" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序">
              <el-input v-model="myForm.num" style="width: 170px" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="描述">
          <el-input v-model="myForm.tips" style="width: 370px" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="cancel">取消</el-button>
        <el-button :loading="submitStatus" type="primary" @click="saveOrEdit"
          >确认</el-button
        >
      </div>
    </el-dialog>
    <!-- 字典列表 -->
    <el-row :gutter="10">
      <el-col
        :xs="24"
        :sm="24"
        :md="10"
        :lg="11"
        :xl="11"
        style="margin-bottom: 10px"
      >
        <el-card class="box-card">
          <!--工具栏-->
          <div class="head-container">
            <div>
              <!-- 搜索 -->
              <el-input
                v-model="query.name"
                clearable
                size="small"
                placeholder="输入名称或编码搜索"
                style="width: 300px"
                class="filter-item"
                @keyup.enter.native="reloadPage"
              />
              <el-button
                class="filter-item"
                size="mini"
                type="success"
                icon="el-icon-search"
                @click="reloadPage"
                >搜索
              </el-button>
              <el-button
                v-permission="permission.add"
                class="filter-item"
                size="mini"
                type="primary"
                icon="el-icon-plus"
                @click="dictAdd"
              >
                新增字典
              </el-button>
            </div>
          </div>
          <!--表格渲染-->
          <el-table
            ref="table"
            v-loading="loading"
            :data="tableData"
            highlight-current-row
            style="width: 100%"
            @current-change="handleCurrentChange"
            @select="selectFuc"
            @select-all="selectAll"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="name"
              label="名称"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="code"
              label="编码"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="tips"
              label="描述"
            />
            <el-table-column
              v-permission="['100', 'dict:edit', 'dict:del']"
              label="操作"
              width="130px"
              align="center"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-button
                  v-permission="permission.edit"
                  size="mini"
                  type="primary"
                  icon="el-icon-edit"
                  @click="editDict(scope.row)"
                ></el-button>
                <el-button
                  v-permission="permission.del"
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  @click="delDict(scope.row.id)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--分页组件-->
          <el-pagination
            :page-size="page.size"
            :total="page.total"
            :current-page="page.page"
            style="margin-top: 8px"
            layout="total, prev, pager, next, sizes"
            @size-change="sizeChangeHandler($event)"
            @current-change="pageChangeHandler"
          />
        </el-card>
      </el-col>
      <!-- 字典详情列表 -->
      <el-col :xs="24" :sm="24" :md="14" :lg="13" :xl="13">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>字典详情</span>
            <el-button
              v-if="
                checkPermission(['100', 'dict:add']) &&
                this.$refs.dictDetail &&
                this.$refs.dictDetail.query.dictName
              "
              class="filter-item"
              size="mini"
              style="float: right; padding: 4px 10px"
              type="primary"
              icon="el-icon-plus"
              @click="$refs.dictDetail && $refs.dictDetail.getData()"
              >新增
            </el-button>
          </div>
          <dictDetail ref="dictDetail" :permission="permission" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import checkPermission from "@/utils/permission";
import dictDetail from "./dictDetail";
import crudDict from "@/api/system/dict";
import msgUtil from "@/utils/msgUtil";




export default {
  name: "Dict",
  components: {
    dictDetail,
  },

  data() {
    return {
      loading: true,
      myTitle: "",
      myForm: {
        id: null,
        pcode: null,
        code: null,
        name: null,
        num: 999,
        tips: null,
      },
      selections: [], //选中的数据
      page: {
        size: 10,
        total: 0,
        page: 1,
      },
      query: { name: "", pcode: 0 },
      submitStatus: false,
      tableData: [],

      dictDialogShow: false,
      flag: "",
      dialogTitle: "维护字典",
      queryTypeOptions: [{ key: "name", display_name: "字典名称" }],
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        code: [{ required: true, message: "请输入编码", trigger: "blur" }],
        pcode: [{ required: true, message: "请输入上级编码", trigger: "blur" }],
      },
      permission: {
        add: ["100", "dict:add"],
        edit: ["100", "dict:edit"],
        del: ["100", "dict:del"],
      },
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 当前页改变
    pageChangeHandler(e) {
      this.page.page = e;
      this.getData();
    },
    // 每页条数改变
    sizeChangeHandler(e) {
      this.page.size = e;
      this.page.page = 1;
      this.getData();
    },
    //刷新第一页数据
    reloadPage() {
      this.page.page = 1;
      this.selections = [];
      if (this.$refs.dictDetail) {
        this.$refs.dictDetail.query.dictName = "";
      }
      this.getData();
    },
    //重置搜索
    resetReloadPage() {
      this.page = {
        size: 10,
        total: 0,
        page: 1,
      };
      this.query = { name: "" };
      if (this.$refs.dictDetail) {
        this.$refs.dictDetail.query.dictName = "";
      }
      this.getData();
    },
    //刷新列表
    getData() {
      this.query.pageNo = this.page.page - 1;
      this.query.pageSize = this.page.size;
      this.loading = true;
      crudDict.getPage(this.query).then((res) => {
        if (res.code == 200) {
          this.loading = false;
          this.tableData = res.data.content;
          this.page.total = res.data.totalElements;
        }
      });
    },

    editDict(data) {
      this.myForm = JSON.parse(JSON.stringify(data));
      this.dictDialogShow = true;
      this.flag = "edit";
    },
    delDict(id) {
      msgUtil.confirm("确认删除该字典及其详情?").then((res) => {
        let ids = [];
        ids.push(id);
        crudDict.del(ids).then((res) => {
          msgUtil.success2("字典删除成功!");
          this.reloadPage();
        });
      });
    },
    dictAdd() {
      this.myForm = {
        id: null,
        pcode: null,
        code: null,
        name: null,
        num: 999,
        tips: null,
      };
      if (this.selections.length) {
        this.myForm.pcode = this.selections[0].code;
      } else {
        this.myForm.pcode = "0";
      }
      this.myForm.pcode = "0";
      this.dictDialogShow = true;
      this.flag = "add";
    },
    saveOrEdit() {
      let params = {
        id: this.myForm.id,
        code: this.myForm.code,
        name: this.myForm.name,
        num: this.myForm.num,
        pcode: 0,
        tips: this.myForm.tips,
      };
      if (this.flag === "add") {
        crudDict.add(params).then((res) => {
          msgUtil.success2("字典新增成功!");
          this.cancel();
          this.reloadPage();
        });
      } else if (this.flag === "edit") {
        crudDict.add(params).then((res) => {
          this.$refs.dictDetail.query.pcode = params.code;
          this.$refs.dictDetail.dictName =
            params.code + "(" + params.name + ")";
          this.$refs.dictDetail.getData();
          msgUtil.success2("字典修改成功!");
          this.cancel();
          this.reloadPage();
        });
      }
    },
    cancel() {
      this.dictDialogShow = false;
    },
    checkPermission,

    selectFuc(selection, row) {
      let oldSelect =this.$refs.table.selection;
      if (oldSelect.length === 0) {
       this.$refs.table.toggleRowSelection(row, false);
      } else {
        this.handleCurrentChange(row, selection[0]);
      }
    },
    // 选中字典后，设置字典详情数据
    handleCurrentChange(val, old) {
      this.$refs.table.clearSelection(); //清空之前勾选的
    this.$refs.table.toggleRowSelection(old, false); //单选则将之前的选项勾掉
     this.$refs.table.toggleRowSelection(val, true); //单选则将选项勾上
      this.selections = this.$refs.table.selection;
      if (val) {
        this.$refs.dictDetail.query.pcode = val.code;
        this.$refs.dictDetail.dictName = val.code + "(" + val.name + ")";
        this.$refs.dictDetail.getData();
      }
    },
    //点击全选触发的方法
    selectAll(e) {
      this.selections = e;
    },
  },
};
</script>

<style scoped>
</style>
